<template>
  <div id="comyear"></div>
</template>

<script>
import * as echarts from "echarts";
import { getComForYear } from "@/api/info.js";
export default {
  name: "CompanyYearChart",
  data() {
    return {
      unironComyearList: [
        { year: 2015, value: 0 },
        { year: 2016, value: 5 },
        { year: 2017, value: 8 },
        { year: 2018, value: 32 },
        { year: 2019, value: 25 },
        { year: 2020, value: 18 },
      ],
      gazelleComyearList: [
        { year: 2015, value: 0 },
        { year: 2016, value: 10 },
        { year: 2017, value: 28 },
        { year: 2018, value: 2 },
        { year: 2019, value: 35 },
        { year: 2020, value: 30 },
      ],
      info: [
        {
          2016: {
            瞪羚企业: 16,
            独角兽企业: 0,
          },
        },
        {
          2017: {
            瞪羚企业: 11,
            独角兽企业: 0,
          },
        },
        {
          2018: {
            瞪羚企业: 70,
            独角兽企业: 0,
          },
        },
        {
          2019: {
            瞪羚企业: 51,
            独角兽企业: 10,
          },
        },
        {
          2020: {
            瞪羚企业: 81,
            独角兽企业: 19,
          },
        },
        {
          2021: {
            瞪羚企业: 0,
            独角兽企业: 0,
          },
        },
      ],
    };
  },
  created() {
    
  },
  async mounted() {
    await this.getInfo();
    this.initComYear();
  },
  methods: {
    async getInfo() {
      let res = await getComForYear();
      if(res.code === 200){
        this.sourceInfo = res.data
        this.manageInfo(res.data)
      }
    },
    manageInfo(data){
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        let key = Object.keys(element)[0]
        const yearInfo = element[key]
        this.unironComyearList[index]['year'] = key
        this.unironComyearList[index]['value'] = yearInfo['独角兽企业']

        this.gazelleComyearList[index]['year'] = key
        this.gazelleComyearList[index]['value'] = yearInfo['瞪羚企业']
      }
      console.log(this.unironComyearList);
      console.log(this.unironComyearList);

    },
    initComYear() {
      var myChart = echarts.init(document.getElementById("comyear"), null, {
        width: 380,
        height: 360,
      });
      let option = {
        dataset: [
          {
            id: "uniron",
            source: this.unironComyearList,
          },
          {
            id: "gazelle",

            source: this.gazelleComyearList,
          },
        ],
        title: {
          text: "江西瞪羚/独角兽企业历年变化趋势",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
        },
        xAxis: {
          type: "category",
          nameLocation: "middle",
          splitLine: { show: true },
        },
        yAxis: {
          splitLine: { show: true },
        },
        series: [
          {
            datasetId: "uniron",
            name: "独角兽企业",
            type: "line",
            smooth: true,
            label: {
              show: true,
              formatter: function (params) {
                return params.value.value;
              },
            },
          },
          {
            datasetId: "gazelle",
            name: "瞪羚企业",
            type: "line",
            smooth: true,
            label: {
              show: true,
              formatter: function (params) {
                return params.value.value;
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style>
</style>